<template>
	<view>
		<view class="searchTitle">招募身份</view>
		<view class="popupFlex">
			<view v-for="(item,index) in Labels.MasterArterLabels" :key="index" class="searchLabel"
				:class="currSearchLabel == item.LabelID && 'sed'" @click="selectLabel(item)">
				<!-- 	<view v-if="currSearchLabel == item.LabelID" class="searchLabel sed">{{ item.LabelName }}</view>
				<view v-else class="searchLabel">{{ item.LabelName }}</view> -->
				{{ item.LabelName }}
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			Labels: {
				type: [Object, Array],
				default: {}
			},
			isClean: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currSearchLabel: 0,
				addLabel: false,
				selectCount: 0
			}
		},
		watch: {
			isClean: {
				handler(val) {
					// console.log(val);
					// console.log('执行了~')
					this.currSearchLabel = 0
					this.$emit('searchLabel', this.currSearchLabel, 0);
				}
			}
		},
		methods: {
			selectLabel(item) {
				// console.log('item', item)
				this.currSearchLabel = item.LabelID
				this.$emit('searchLabel', this.currSearchLabel, 0);
			},

		}
	}
</script>

<style lang="scss">
	/* .searchTitle {
		clear:both;
		font-size: 30rpx;
		font-weight: bold
	} */
	.popupFlex {
		display: flex;
		flex-wrap: wrap
	}

	/* 	.searchLabel {
		width:auto;
		float:left;
		padding:10rpx;
		background-color: #f0f0f0;
		color:#666;
		border-radius: 10rpx;
		margin:20rpx;
	} */
	.searchLabel.sed {
		background-color: #FFDD00;
	}

	.searchTitle:first-child {
		padding-top: 0;
	}

	.searchTitle {
		clear: both;
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
		padding: 20rpx 0;
	}

	.searchLabel {
		width: calc((100% - 30rpx) /4);
		background-color: #f0f0f0;
		color: #666;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		text-align: center;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}
</style>